<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
					</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
			<view class="header-center">
				<text class="header-title">证书</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y="true">
			<view class="tips">长按图片可保存到相册</view>
			<image
				class="certificate-image"
				:src="certificateUrl"
				mode="widthFix"
				@longpress="handleLongPress"
				@error="handleImageError"
			></image>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			certificateUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/koc/tc2025/certification3.jpg'
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		handleImageError() {
			// 加载失败时回退到本地占位图
			this.certificateUrl = '/static/box.png'
			uni.showToast({ title: '图片加载失败，已使用占位图', icon: 'none' })
		},
		async handleLongPress() {
			try {
				uni.showLoading({ title: '保存中...', mask: true })
				let tempPath = ''
				// 优先尝试下载远程图片
				try {
					tempPath = await new Promise((resolve, reject) => {
						uni.downloadFile({
							url: this.certificateUrl,
							success: (res) => {
								if (res.statusCode === 200) {
									resolve(res.tempFilePath)
								} else {
									reject(new Error('下载失败'))
								}
							},
							fail: reject
						})
					})
				} catch (e) {
					// 下载失败时，尝试通过 getImageInfo 获取本地或打包资源路径
					tempPath = await new Promise((resolve, reject) => {
						uni.getImageInfo({
							src: this.certificateUrl,
							success: (info) => resolve(info.path || info.tempFilePath),
							fail: reject
						})
					})
				}
				// 保存到相册（需要相册权限）
				await new Promise((resolve, reject) => {
					uni.saveImageToPhotosAlbum({ filePath: tempPath, success: resolve, fail: reject })
				})
				uni.hideLoading()
				uni.showToast({
					title: '已保存至相册',
					icon: 'success'
				})
			} catch (err) {
				uni.hideLoading()
				// 处理权限问题
				if (err && (err.errMsg || '').includes('auth deny')) {
					uni.showModal({
						title: '提示',
						content: '需要相册权限以保存图片，是否前往设置开启？',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({})
							}
						}
					})
				} else {
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					})
				}
			}
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* 顶部导航栏 */
.header {
	background: transparent;
	padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
	padding-top: 104rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1000;
}

.header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	color: #333333;
	font-weight: bold;
}

.content {
	flex: 1;
	padding: 30rpx;
	margin: 0;
	box-sizing: border-box;
	background: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.tips {
	text-align: center;
	color: #999999;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}

.certificate-image {
	width: 100%;
	border-radius: 12rpx;
}

/* 全局返回按钮样式（与其他页面保持一致） */
.global-back-button {
	width: 60rpx;
	height: 60rpx;
	background: #333333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.global-back-icon {
	color: white;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 1;
}

.global-back-text {
	color: #000000;
	font-size: 28rpx;
}

.global-header-left {
	display: flex;
	align-items: center;
}
</style>


